<template>
  <div id="app">
    <!-- height: 1000px;width: 1000px; -->
    <div id="map" style="height: 500px; width: 540px"></div>
    <!-- <button class="btn" :style="{ display: isActive ? 'none' : 'block' }" @click="btnMap">地图</button> -->
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import ZoomTo from "ol/control/ZoomToExtent";
import ZoomSlider from "ol/control/ZoomSlider";
import FullScreen from "ol/control/FullScreen";
// import { transform } from "ol/proj";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Circle, Fill, Stroke, Style, Text } from "ol/style"; //
import Vector from "ol/source/Vector";
import Vect from "ol/layer/Vector";
export default {
  name: "App",
  data() {
    return {
      isActive: true,
    };
  },
  methods: {
    btnMap() {
      const map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
              // wrapX: false
              url: "http://192.168.1.66:8083" + "/{z}/{x}/{y}.png",
            }),
          }),
        ],
        view: new View({
          center: [116.405285, 39.904989], //中心点 经度、纬度
          zoom: 4, // 设置缩放级别
          minZoom: 1, // 设置最小缩放级别
          maxZoom: 10, // 设置最大缩放级别
          // center: transform([109, 34], 'EPSG:4326', 'EPSG:3857')
          projection: "EPSG:4326", //'EPSG:3857'这是投影坐标类型
          extent: [73.66, 3.86, 135.05, 53.55], //中国边界
        }),
      });

      /* 视图跳转控件 [106.6670034817791, 31.8190515]*/
      const ZoomToExtent = new ZoomTo({
        extent: [110, 30, 160, 30], //显示的坐标
      });
      map.addControl(ZoomToExtent);
      // /* 放大缩小控件 */
      const zoomslider = new ZoomSlider();
      map.addControl(zoomslider);
      // //全屏控件
      const fullScreen = new FullScreen();
      map.addControl(fullScreen);
      // /* 1、构建要素 */
      let point = new Feature({
        geometry: new Point([114.3, 30.5]), //几何信息 坐标
        name: 1,
      });
      let style = new Style({
        text: new Text({
          text: 1, // 假设点要素有一个'num'属性，或者从其他地方获取编号
          fill: new Fill({ color: "#000" }),
          stroke: new Stroke({ color: "#fff", width: 3 }),
        }),
        // image属性设置点要素的样式
        image: new Circle({
          radius: 10, //点的半径 单位： 度
          fill: new Fill({
            color: "#ff2d51",
          }),
          // stroke设置描边 类似于边框
          stroke: new Stroke({
            color: "#333",
            width: 2,
          }),
        }),
      });
      point.setStyle(style);
      /* 2、将要素添加到矢量数据源 */
      const source = new Vector({
        features: [point],
      });
      /* 3、将矢量数据源添加到矢量图层 */
      const layer = new Vect({
        source,
      });
      /* 4、将矢量图层添加到地图容器 */
      map.addLayer(layer);
      map.on("click", (e) => {
        console.log(e);
        let { coordinate } = e;
        console.log(coordinate);
      });
      this.addPoint(map);
    },
    addPoint(map) {
      let point = new Feature({
        geometry: new Point([115.3, 32.5]), //几何信息 坐标
        name: 1,
      });
      let style = new Style({
        text: new Text({
          text: 2, // 假设点要素有一个'num'属性，或者从其他地方获取编号
          fill: new Fill({ color: "#000" }),
          stroke: new Stroke({ color: "#fff", width: 3 }),
        }),
        // image属性设置点要素的样式
        image: new Circle({
          radius: 10, //点的半径 单位： 度
          fill: new Fill({
            color: "#ff2d51",
          }),
          // stroke设置描边 类似于边框
          stroke: new Stroke({
            color: "#333",
            width: 2,
          }),
        }),
      });
      point.setStyle(style);
      /* 2、将要素添加到矢量数据源 */
      const source = new Vector({
        features: [point],
      });
      /* 3、将矢量数据源添加到矢量图层 */
      const layer = new Vect({
        source,
      });
      /* 4、将矢量图层添加到地图容器 */
      map.addLayer(layer);
    },
  },
  mounted() {
    this.btnMap();
  },
};

// 弄清 1-4是什么意思 下载瓦片 本地加载瓦片
</script>

<style>
.ol-zoomslider {
  top: 7.5em;
}
</style>
